<!-- Buttons to add to the header. *ngIf is needed, otherwise the component is executed too soon and doesn't find the header. -->
<core-navbar-buttons end *ngIf="loaded">
    <core-context-menu>
        <core-context-menu-item [hidden]="!displaySectionSelector || !sections || !sections.length" [priority]="500" [content]="'core.course.sections' | translate" (action)="showSectionSelector($event)" iconAction="menu"></core-context-menu-item>
    </core-context-menu>
</core-navbar-buttons>

<core-block-course-blocks [courseId]="course.id" [hideBlocks]="selectedSection && selectedSection.id == allSectionsId && canLoadMore" [downloadEnabled]="downloadEnabled">
    <!-- Default course format. -->
    <core-dynamic-component [component]="courseFormatComponent" [data]="data">
        <core-loading [hideUntil]="loaded">
            <!-- Section selector. -->
            <core-dynamic-component [component]="sectionSelectorComponent" [data]="data">
                <div text-wrap *ngIf="displaySectionSelector && sections && sections.length" padding class="clearfix" ion-row justify-content-between class="safe-padding-horizontal core-button-selector-row" [class.core-section-download]="downloadEnabled">
                    <button float-start ion-button icon-start icon-end (click)="showSectionSelector($event)" color="light" class="core-button-select button-no-uppercase" ion-col [attr.aria-label]="('core.course.sections' | translate) + ': ' + (selectedSection && (selectedSection.formattedName || selectedSection.name))" aria-haspopup="true" [attr.aria-expanded]="sectionSelectorExpanded" aria-controls="core-course-section-selector" id="core-course-section-button">
                        <core-icon name="fa-folder"></core-icon>
                        <span class="core-button-select-text">{{selectedSection && (selectedSection.formattedName || selectedSection.name) || 'core.course.sections' | translate }}</span>
                        <ion-icon name="arrow-dropdown" ios="md-arrow-dropdown"></ion-icon>
                    </button>
                    <!-- Section download. -->
                    <ng-container *ngTemplateOutlet="sectionDownloadTemplate; context: {section: selectedSection}"></ng-container>
                </div>
            </core-dynamic-component>

            <!-- Course summary. By default we only display the course progress. -->
            <core-dynamic-component [component]="courseSummaryComponent" [data]="data">
                <ion-list no-lines *ngIf="course.imageThumb || (selectedSection && selectedSection.id == allSectionsId && course.progress != null && course.progress >= 0)" class="core-format-progress-list">
                    <div *ngIf="course.imageThumb" class="core-course-thumb">
                        <img [src]="course.imageThumb" core-external-content alt=""/>
                    </div>
                    <ion-item class="core-course-progress" *ngIf="selectedSection && selectedSection.id == allSectionsId && course.progress != null && course.progress >= 0 && course.completionusertracked !== false">
                        <core-progress-bar [progress]="course.progress"></core-progress-bar>
                    </ion-item>
                </ion-list>
            </core-dynamic-component>

            <!-- Single section. -->
            <div *ngIf="selectedSection && selectedSection.id != allSectionsId">
                <core-dynamic-component [component]="singleSectionComponent" [data]="data">
                    <ng-container *ngTemplateOutlet="sectionTemplate; context: {section: selectedSection}"></ng-container>
                    <core-empty-box *ngIf="!selectedSection.hasContent" icon="qr-scanner" [message]="'core.course.nocontentavailable' | translate"></core-empty-box>
                </core-dynamic-component>
            </div>

            <!-- Multiple sections. -->
            <div *ngIf="selectedSection && selectedSection.id == allSectionsId">
                <core-dynamic-component [component]="allSectionsComponent" [data]="data">
                    <ng-container *ngFor="let section of sections; index as i">
                        <ng-container *ngIf="i <= showSectionId">
                            <ng-container *ngTemplateOutlet="sectionTemplate; context: {section: section}"></ng-container>
                        </ng-container>
                    </ng-container>
                </core-dynamic-component>

                <core-infinite-loading [enabled]="canLoadMore" (action)="showMoreActivities($event)"></core-infinite-loading>
            </div>

            <ion-buttons padding end class="core-course-section-nav-buttons safe-padding-horizontal" *ngIf="displaySectionSelector && sections && sections.length">
                <button *ngIf="previousSection" ion-button color="light" icon-only (click)="sectionChanged(previousSection)" title="{{ 'core.previous' | translate }}">
                    <ion-icon name="arrow-back" md="ios-arrow-back"></ion-icon>
                    <core-format-text class="accesshide" [text]="previousSection.formattedName || previousSection.name" contextLevel="course" [contextInstanceId]="course.id"></core-format-text>
                </button>
                <button *ngIf="nextSection" ion-button icon-only (click)="sectionChanged(nextSection)" title="{{ 'core.next' | translate }}">
                    <core-format-text class="accesshide" [text]="nextSection.formattedName || nextSection.name" contextLevel="course" [contextInstanceId]="course.id"></core-format-text>
                    <ion-icon name="arrow-forward" md="ios-arrow-forward"></ion-icon>
                </button>
            </ion-buttons>
        </core-loading>
    </core-dynamic-component>
</core-block-course-blocks>

<!-- Template to render a section. -->
<ng-template #sectionTemplate let-section="section">
    <section ion-list *ngIf="!section.hiddenbynumsections && section.id != allSectionsId && section.id != stealthModulesSectionId">
        <!-- Title is only displayed when viewing all sections. -->
        <ion-item-divider text-wrap color="light" *ngIf="selectedSection.id == allSectionsId && section.name" [class.core-section-download]="downloadEnabled">
            <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course.id"></core-format-text>
            <!-- Section download. -->
            <ng-container *ngTemplateOutlet="sectionDownloadTemplate; context: {section: section}"></ng-container>
        </ion-item-divider>

        <ion-item text-wrap *ngIf="section.summary">
            <core-format-text [text]="section.summary" contextLevel="course" [contextInstanceId]="course.id"></core-format-text>
        </ion-item>

        <ng-container *ngFor="let module of section.modules">
            <core-course-module *ngIf="module.visibleoncoursepage !== 0" [module]="module" [courseId]="course.id" [downloadEnabled]="downloadEnabled" [section]="section"
                    (completionChanged)="onCompletionChange($event)" (statusChanged)="onModuleStatusChange($event)"></core-course-module>
        </ng-container>
    </section>
</ng-template>

<!-- Template to render a section download button/progress. -->
<ng-template #sectionDownloadTemplate let-section="section">
    <div *ngIf="section && downloadEnabled" class="core-button-spinner" float-end>
        <!-- Download progress. -->
        <ion-badge class="core-course-download-section-progress" *ngIf="section.isDownloading && section.total > 0 && section.count < section.total">{{section.count}} / {{section.total}}</ion-badge>

        <core-download-refresh [status]="section.downloadStatus" [enabled]="downloadEnabled" [loading]="section.isDownloading || section.isCalculating" [canTrustDownload]="section.canCheckUpdates" (action)="prefetch(section, $event)"></core-download-refresh>
    </div>
</ng-template>
